<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
    <el-form :model="formData" ref="formRef" :rules="rules" label-width="100px">
      <el-form-item label="所属园区" prop="parkId">
        <el-input v-model="formData.parkName" disabled />
      </el-form-item>
      <el-form-item label="楼栋名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入楼栋名称" />
      </el-form-item>
      <el-form-item label="楼栋类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择楼栋类型">
          <el-option label="办公楼" value="office" />
          <el-option label="宿舍楼" value="dormitory" />
          <el-option label="商业楼" value="commercial" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>
      <el-form-item label="楼层数" prop="floors">
        <el-input v-model.number="formData.floors" placeholder="请输入楼层数" type="number" min="1" />
      </el-form-item>
      <el-form-item label="楼栋描述">
        <el-input v-model="formData.description" placeholder="请输入楼栋描述" type="textarea" rows="4" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, inject } from 'vue';
import { ElMessage,ElLoading } from 'element-plus';
import request from '@/api/request'

// 状态管理
const dialogVisible = ref(false);
const dialogTitle = ref('新增楼栋');
const formData = ref({});
const formRef = ref(null);

// 验证规则
const rules = ref({
  name: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择楼栋类型', trigger: 'change' }],
  floors: [
    { required: true, message: '请输入楼层数', trigger: 'blur' },
    { type: 'number', min: 1, message: '楼层数必须大于0', trigger: 'blur' }
  ]
});

// 注入主组件的数据
const buildingData = inject('buildingData');
const emit = defineEmits(['success']);

let submitSuccessCallback = null;

// 打开弹窗
const open = (data, callback) => {
  submitSuccessCallback = callback
  if (data.id) {
    // 编辑模式
    formData.value = { ...data };
    dialogTitle.value = '编辑楼栋';
  } else {
    // 新增模式
    formData.value = {
      ...data,
      name: '',
      type: '',
      floors: 1,
      description: ''
    };
    dialogTitle.value = '新增楼栋';
  }
  dialogVisible.value = true;
};
// 保存数据
const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        text: '正在处理...',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      if (formData.value.id) {
        request.post('/park-building/modify', formData.value).then(data => {
          dialogVisible.value = false;
          loading.close()
          if (data.success) {
            ElMessage.success(data.message);
            emit('success');
            // 提交成功后调用上层传入的回调
            if (submitSuccessCallback) {
              submitSuccessCallback("parkBuildingList", formData.value.parkId);
            }
          } else {
            ElMessage.success(data.message);
            emit('fail');
          }
        }).catch(error => {
          loading.close()
          ElMessage.error('编辑异常', error)
        });
      } else {
        // 新增
        request.post('/park-building/add', formData.value).then(data => {
          dialogVisible.value = false;
          loading.close()
          if (data.success) {
            ElMessage.success(data.message);
            emit('success');
            // 提交成功后调用上层传入的回调
            if (submitSuccessCallback) {
              submitSuccessCallback("parkBuildingList", formData.value.parkId);
            }
          } else {
            ElMessage.success(data.message);
            emit('fail');
          }
        }).catch(error => {
          loading.close()
          ElMessage.error('编辑异常', error)
        });
      }
    }
  });
};

// 暴露方法
defineExpose({
  open
});
</script>
